<template>
  <div class="main">
    <p class="main_text">上传两证</p>
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="searchData">
        <div class="df fww">
          <el-form-item label="车牌号：" style="width: 20%">
            <el-input v-model="searchData.carId" placeholder="车牌号" class="mr20" />
          </el-form-item>
          <el-form-item label="车辆类型：" style="width: 20%">
            <el-input v-model="searchData.carType" placeholder="车辆类型" class="mr20" />
          </el-form-item>
          <el-form-item label="车辆品牌：" style="width: 20%">
            <el-input v-model="searchData.brand" placeholder="车辆品牌" class="mr20" />
          </el-form-item>
          <el-form-item label="是否上传两证" style="width: 20%">
            <el-select v-model="searchData.uploadImg" placeholder="是否上传两证" class="mr20">
              <el-option label="已上传" value="true" />
              <el-option label="未上传" value="false" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchDataBtn">查询</el-button>
            <el-button type="primary" plain @click="resc">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="content p20 cyr-flex">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f0f6fe' }" border v-adaptive>
        <!-- <el-table-column type="selection" width="50" /> -->
        <el-table-column label="编号" prop="id" width="60" />
        <el-table-column label="车牌号" prop="carInfo.value.号牌号码" :show-overflow-tooltip="true">
          <template #default="props">
            <el-text tag="span" style="cursor: pointer" @click="check(props.row)">{{
              props.row.carInfo.value.号牌号码
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="车辆类型" prop="carInfo.value.车辆类型" :show-overflow-tooltip="true" />
        <el-table-column label="车辆品牌" prop="carInfo.value.品牌型号" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="整备质量" prop="carInfo.value.整备质量" /> -->
        <el-table-column label="车辆颜色" prop="color" :show-overflow-tooltip="true" />
        <el-table-column label="入场编号" prop="incomeId" :show-overflow-tooltip="true" />
        <el-table-column label="入库时间" prop="createdAt" :show-overflow-tooltip="true" />
        <el-table-column label="上传两证">
          <template #default="props">
            <el-tag v-if="props.row.uploadImg">已上传</el-tag>
            <el-tag v-else type="info">未上传</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="车辆状态">
          <template #default="props">
            <el-tag v-if="props.row.exceptionType == 2" type="danger">异常</el-tag>
            <el-tag v-else>正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="props">
            <el-button size="small" link type="primary" @click="check(props.row)"
              v-if="!props.row.uploadImg && roleList.write && props.row.exceptionType != 2">上传证明</el-button>
            <el-button size="small" link type="primary" @click="check(props.row)" v-else>查看</el-button>
          </template>
        </el-table-column>
        <!-- #################################### 分页 #################################### -->
      </el-table>
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        @change="handleCurrentChange" />
    </div>
    <!-- ############################################## 蒙层 ############################################## -->
    <!-- ****************************** 上传证明 ****************************** -->
    <el-dialog v-model="seeCenterDialogVisible" title="上传证明" width="40%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">上传证明</p>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">车牌号码</div>
          </template>
          {{ checkData.carInfo.value.号牌号码 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">车架号</div>
          </template>
          {{ checkData.carInfo.value.车辆识别代号 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">使用性质</div>
          </template>
          {{ checkData.carInfo.value.使用性质 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">车辆类型</div>
          </template>
          {{ checkData.carInfo.value.车辆类型 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">车辆品牌</div>
          </template>
          {{ checkData.carInfo.value.品牌型号 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">核载人数</div>
          </template>
          {{ checkData.carInfo.value.核定载人数 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">入场编号</div>
          </template>
          {{ checkData.incomeId }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="title" v-if="checkData.exceptionType != 2">上传两证</div>
      <div class="df" v-if="checkData.exceptionType != 2">
        <div class="df" style="margin-right: 3.75rem">
          <div class="mr10">注销证明：</div>
          <img v-if="checkData.uploadImg == true" class="zxImg" :src="zxImage" alt="" @click="checkImg(zxImage)" />
          <div v-else class="upload">
            <el-icon class="add">
              <Plus />
            </el-icon>
            <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" v-model:file-list="zxImg"
              :on-change="changeFile">
              <el-icon>
                <Plus />
              </el-icon>

              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
          </div>
        </div>
        <div class="df">
          <div class="mr10">回收证明：</div>
          <img v-if="checkData.uploadImg == true" class="zxImg" :src="recycleImage" alt=""
            @click="checkImg(recycleImage)" />
          <div v-else class="upload">
            <el-icon class="add">
              <Plus />
            </el-icon>
            <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1"
              v-model:file-list="recycleImg" :on-change="changeFile1">
              <el-icon>
                <Plus />
              </el-icon>

              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove2(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="seeCenterDialogVisible = false">取消</el-button>
          <el-button @click="saveImg" :loading="loading" type="primary"
            v-if="!checkData.uploadImg && roleList.write && checkData.exceptionType != 2">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible" align-center width="70%">
      <div style="height: 70vh; width: 100%; background-color: #fff; overflow-y: scroll">
        <img style="width: 100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { Edit } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { RequestScrapCarGetlistlimit, RequestUpLoadScrapCarDisassemblyCertificate } from '@/api/path/index.js';
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue';
import { formatTime } from '@/filters/index';
import useAuthorize from '@/hooks/authorize';
let roleList = useAuthorize();
/*************************************** 查询 ***************************************/
const searchData = ref<any>({
  carId: null,
  carType: null,
  brand: null,
  ifWeight: null,
  pretreated: null,
  uploadImg: null,
});
const searchDataBtn = () => {
  currentPage.value = 1;
  getData();
};
/*************************************** 重置 ***************************************/
const resc = () => {
  currentPage.value = 1;
  (searchData.value.carId = null),
    (searchData.value.carType = null),
    (searchData.value.brand = null),
    (searchData.value.ifWeight = null),
    (searchData.value.pretreated = null),
    (searchData.value.uploadImg = null),
    getData();
};
const tableData = ref<any>([]);
const seeCenterDialogVisible = ref<any>(false);
/* 分页器 */
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getData();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getData();
};
/* ************* 获取列表数据 ************* */
const total = ref<any>(1);
const currentPage = ref(1);
const pageSize = ref(10);
const getData = () => {
  RequestScrapCarGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
    carId: searchData.value.carId,
    carType: searchData.value.carType,
    brand: searchData.value.brand,
    ifWeight: searchData.value.ifWeight,
    pretreated: searchData.value.pretreated,
    uploadImg: searchData.value.uploadImg,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.carInfo.value = JSON.parse(item.carInfo.value);
      item.createdAt = formatTime(item.createdAt);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
    console.log(tableData.value);
  });
};

/* ************* 上传证明 ************* */
const checkData = ref();
const zxImage = ref();
const recycleImage = ref();
const check = (row: any) => {
  seeCenterDialogVisible.value = true;
  checkData.value = row;
  console.log(checkData.value);
  checkData.value.imgs.forEach((item: any) => {
    console.log(item);
    if (item.imageType == 1) {
      recycleImage.value = item.url;
    } else if (item.imageType == 2) {
      zxImage.value = item.url;
    }
  });
};
getData();
/* ************* 上传两证 ************* */
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const disabled = ref(false);
const handleRemove1 = (file: any) => {
  console.log(file);
  zxImg.value = [];
};
const handleRemove2 = (file: any) => {
  console.log(file);
  recycleImg.value = [];
};
const handlePictureCardPreview = (file: any) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
const handleDownload = (file: any) => {
  console.log(file);
};
const zxImg = ref<any>([]);
const changeFile = (file: any) => {
  zxImg.value[0] = file.raw;
};
const recycleImg = ref<any>([]);
const changeFile1 = (file: any) => {
  recycleImg.value[0] = file.raw;
};
const loading = ref<any>(false);
const saveImg = () => {
  if (recycleImg.value != null && zxImg.value != null) {
    // loading.value = true
    console.log('回收', recycleImg.value[0]); //1
    console.log('注销', zxImg.value[0]); //2
    console.log('id', checkData.value.id);
    let imgFlie = new FormData();
    imgFlie.append('vehicleId', checkData.value.id);
    imgFlie.append('zxImg', zxImg.value[0].raw);
    imgFlie.append('recycleImg', recycleImg.value[0].raw);
    RequestUpLoadScrapCarDisassemblyCertificate(imgFlie).then((res: any) => {
      if (res.success == true) {
        loading.value = false;
        ElMessage.success(res.msg);
        recycleImg.value = [];
        zxImg.value = [];
        seeCenterDialogVisible.value = false;
        getData();
      }
    });
  } else {
    ElMessage.error('必须上传两证');
  }
};

const checkImg = (e: any) => {
  dialogVisible.value = true;
  dialogImageUrl.value = e;
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }

  .title {
    width: 100%;
    background-color: #f5f7fa;
    margin: 1.25rem 0;
    color: #3d3d3d;
    padding: 0.625rem;
  }
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;

    .el-icon svg {
      color: #fff;
    }
  }

  .el-dialog__title {
    color: #fff;
  }
}

.carImg {
  width: 4.375rem;
  height: 4.375rem;
  margin-right: 0.625rem;
  border-radius: 0.25rem;
}

::v-deep.el-descriptions__table,
::v-deep .el-descriptions__cell {
  width: 3.75rem !important;
}

/* 文件上传 */

/* 上传框 */
.upload {
  width: 81.6px;
  height: 81.6px;
  border-radius: 6px;
  background-color: #fafafa;
  overflow: hidden;
  border: 1px dashed #cdd0d6;
  position: relative;
}

.upload:hover {
  border: 1px dashed #116cf8;
  transition: 500ms;

  .add {
    color: #116cf8;
    transition: 500ms;
  }
}

.add {
  font-size: 36px;
  color: #cccccc;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

::v-deep .el-upload-list__item,
::v-deep .el-upload-list__item-thumbnail,
::v-deep .el-upload {
  width: 80px;
  height: 80px;
}

::v-deep .el-upload {
  opacity: 0;
}

::v-deep.el-upload-list--picture-card,
::v-deep .el-upload-list__item-actions {
  width: 80px !important;
  height: 80px !important;
}

// ::v-deep.el-upload-list__item-actions:hover {
//     width: 80px;
//     height: 80px;
// }
.zxImg {
  width: 80px;
  height: 80px;
  border-radius: 0.5rem;
}
</style>
